<template>
  <div class="components-attr-edit">
    <div v-if="activeElementUUID" class="attr-edit-inner">
      <div class="props-attr-style">
        <props-Attr />
      </div>
      <div class="common-attr-style">
        <base-Attr />
      </div>
    </div>
    <div v-else>
      <p class="gray paddingT30 text-center">请在画板上选择需要编辑得元素</p>
    </div>
  </div>
</template>

<script>
import BaseAttr from './attr-props-components/base-attr'
import PropsAttr from './attr-props-components/props-attr/index.vue'
import { mapGetters } from 'vuex'

export default {
  components: {
    BaseAttr,
    PropsAttr
  },
  props: {},
  computed: {
    ...mapGetters([
      'projectData',
      'activePageUUID',
      'activeElementUUID',
      'currentPageIndex',
      'activeElementIndex'
    ])
  }
}
</script>

<style lang="scss" scoped>
  .components-attr-edit {
    height: 100%;
  }
</style>
